/// <reference path="../shared/_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />
/// <reference path="../vendors/photoswipe/_main-settings.scss" />


// Photoswipe Theme
// ------------------------------------------------------

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/

// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.



/*@import "../main-settings";*/


/*
	
	1. Buttons

 */

$pswp__assets-path: 'photoswipe/img/';
$pswp__background-color: #fff;

/* <button> css reset */
.pswp__button {
    display: inline-block;
    @include fontawesome-font("", regular);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    position: relative;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: 0.75;
    transition: opacity 0.1s ease-in-out, background-color 0.1s ease-in-out;
    box-shadow: none;
    color: #777;
    color: inherit;

    &:focus,
    &:hover {
        background: rgba(0,0,0, 0.08);
    }

    &:active {
        background: rgba(0,0,0, 0.12);
    }

    &:focus,
    &:hover {
        opacity: 0.85 !important;
    }

    &:active {
        outline: none;
        opacity: 1 !important;
    }

    &::-moz-focus-inner {
        padding: 0;
        border: 0
    }
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
    //opacity: 1;
}

.pswp__button--close {
    font-family: inherit;
    font-size: 26px;
    padding-bottom: 7px;
    font-weight: $font-weight-medium;
    margin-left: 2rem;

    &:focus,
    &:hover,
    &:active {
        background: $light;
    }
}

.pswp__button--fs {
    display: none;
}

.pswp--supports-fs .pswp__button--fs {
    display: block;

    &:before {
        content: "\f065"; /* expand */
    }
}

.pswp--fs .pswp__button--fs:before {
    content: "\f066"; /* compress */
}

.pswp__button--zoom {
    display: none;

    &:before {
        content: "\f067"; /* plus */
    }
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

.pswp--zoomed-in .pswp__button--zoom:before {
    content: "\f068"; /* minus */
}

/* no arrows on touch screens */
.pswp--touch {
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        visibility: hidden;
    }
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/

.pswp__button--arrow--left,
.pswp__button--arrow--right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    font-size: 30px;
    padding: 0;
}

.pswp__button--arrow--left {
    left: 0;

    &:before {
        content: "\f053"; /* angle-left */
    }
}

.pswp__button--arrow--right {
    right: 0;

    &:before {
        content: "\f054"; /* angle-right */
    }
}


/*

	2. Share modal/popup and links

 */

.pswp__counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/*

	3. Index indicator ("1 of X" counter)

 */

.pswp__counter {
    position: relative;
    float: left;
    width: 80px;
    height: 40px;
    font-size: inherit;
    font-weight: $font-weight-medium;
    line-height: 40px;
    color: rgba(0,0,0, 0.6);
    //opacity: 0.75;
    padding-left: 20px;
}

.pswp__zoom-controls {
    position: relative;
    float: left;
    height: 40px;
}


/*
	
	4. Caption

 */

.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 40px;

    small {
        font-size: 11px;
        color: #BBB;
    }
}

.pswp__caption__center {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #CCC;
}

.pswp__caption--empty {
    display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
    visibility: hidden;
}


/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */

.pswp__preloader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -22px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    will-change: opacity;
    direction: ltr;
}

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px;
}

.pswp__preloader--active {
    opacity: 1;
}

.pswp--css_animation {
    .pswp__preloader--active {
        opacity: 1;

        .pswp__preloader__icn {
            animation: clockwise 500ms linear infinite;
        }

        .pswp__preloader__donut {
            animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
        }
    }

    .pswp__preloader__icn {
        background: none;
        opacity: 0.75;
        width: 14px;
        height: 14px;
        position: absolute;
        left: 15px;
        top: 15px;
        margin: 0;
    }


    .pswp__preloader__cut {
        /* 
			The idea of animating inner circle is based on Polymer ("material") loading indicator 
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
        position: relative;
        width: 7px;
        height: 14px;
        overflow: hidden;
    }

    .pswp__preloader__donut {
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        border: 2px solid #FFF;
        border-radius: 50%;
        border-left-color: transparent;
        border-bottom-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        background: none;
        margin: 0;
    }
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        float: right;
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes donut-rotate {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(-140deg)
    }

    100% {
        transform: rotate(0)
    }
}


/*
	
	6. Additional styles

 */

/* root element of UI */
.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: $pswp__root-z-index + 50;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 100%;
}

.pswp__caption,
.pswp__top-bar {
    -webkit-backface-visibility: hidden;
    will-change: opacity;
    transition: opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse {
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        visibility: visible;
    }
}

.pswp__top-bar,
.pswp__caption {
    background-color: rgba(255,255,255, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit {
    .pswp__top-bar,
    .pswp__caption {
        background-color: rgba(255,255,255, 0.3);
    }
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */

.pswp__ui--idle {
    .pswp__top-bar {
        opacity: 0;
    }

    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        opacity: 0;
    }
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden {
    .pswp__top-bar,
    .pswp__caption,
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        /* Force paint & create composition layer for controls. */
        opacity: 0.001;
    }
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide {
    .pswp__button--arrow--left,
    .pswp__button--arrow--right,
    .pswp__counter {
        display: none;
    }
}

.pswp__element--disabled {
    display: none !important;
}

@if $pswp__include-minimal-style == true {
    .pswp--minimal--dark {
        .pswp__top-bar {
            background: none;
        }
    }
}

.pswp__container.sliding {
    transition: transform $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1);
}


// Video support
// ========================================

.pswp__item .video-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    bottom: 20%;

    > video {
        outline: 0 !important;
        width: 100%;
        height: auto;
        max-width: 700px;
        max-height: 100%;
    }

    @include media-breakpoint-up(lg) {
        left: 5%;
        right: 5%;
        top: 15%;
        bottom: 15%;

        > video {
            width: auto;
            height: 100%;
            max-width: 100%;
            box-shadow: $box-shadow-var;
        }
    }
}